<template>
  <view v-if="shenheStatus == 0" class="shop_box">
    <view class="shop_title">
      <view>{{ $t('admin.shopName') }}</view>
      <view>Logo</view>
      <view>{{ $t('share.regTime') }}</view>
      <view>{{ $t('agency.class') }}</view>
    </view>
    <view> </view>
    <view class="shop_item" v-for="(item, index) in shop_list" :key="index">
      <view
        ><text>{{ item.name }}</text></view
      >
      <view>
        <image :src="item.logo" mode="aspectFill"></image>
      </view>
      <view>{{ item.created_at }}</view>
      <view
        ><text>{{ item.category_name }}</text></view
      >
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      shop_list: [],
      page: 1,
    };
  },
  created() {
    this.getData();
  },
  onReachBottom() {
    this.page++;
    this.getData();
  },
  methods: {
    getData() {
      this.$allrequest.agency.shop({ page: this.page }).then(res => {
        if (res.code == 0) {
          this.shop_list = res.data;
        }
      });
    },
  },
};
</script>

<style>
page {
  background: #f2f2f2;
}
.shop_title,
.shop_item {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  padding: 20rpx 0;
  font-size: 26rpx;
  margin-bottom: 20rpx;
}

.shop_title {
  border-radius: 0 0 16rpx 16rpx;
  margin-top: 16rpx;
}
.shop_item {
  border-radius: 16rpx;
}
.shop_item image {
  width: 40rpx;
  height: 40rpx;
}
.shop_item text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 60%;
  text-align: center;
}
.shop_title view,
.shop_item view {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
